<template>
  <div class="main project">
    <swiper  v-if="bannerList.length > 0" class="swiper" :current="currentSwiper" indicator-active-color="#EF5A56" circular="true" indicator-color="#C7C7C7" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
      <block v-for="(item, index) in bannerList" :index="index" :key="index">
        <swiper-item>
          <img :lazy-load="true" ﻿@tap="goPage(item.url)" :src="picPre + item.pic" class="slide-image" mode="widthFix"/>
        </swiper-item>
      </block>
    </swiper>
    <tableCell title="推荐项目" url="/project/list?type=0"></tableCell>
    <div class="recommend">
      <div>
        <span class="iconfont iconyinhao"></span>
        <p>
          电影是平凡生活中的英雄梦想，是将我们人生涂白后的一次次刷上斑斓色彩。从现在开始，关注一部电影，去看看不一样的人生。我们都是这个平凡世界里的不平凡，我们是电影人……
        </p>
      </div>
      <card :list="movieList" :type="1"></card>
    </div>
    <div v-for="(item, index) in classList" :key="index">
      <tableCell :title="item.class_name" :url="'/project/list?type='+item.class_id"></tableCell>
      <div class="project-movie">
        <div>
          <p>精选</p>
          <p>{{ item.class_info }}</p>
        </div>
        <div>
          <card :list="item.list" :type="2"></card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tableCell from '@/components/tableCell/index'
  import card from '@/components/project/card'
  export default {
  components:{
    tableCell,
    card
  },
  data(){
    let that = this;
    return {
      picPre: that.$api.picPre,
      bannerList: [],
      movieList: [],
      classList:[],
      loadingEnd:{
        moduleOne: false,
        moduleTwo: false,
        moduleThree: false
      },
      currentSwiper: 0
    }
  },
  methods:{
    goPage(url){
        uni.navigateTo({
        	url: url
        })
      },
    // 获取banner
    getBannerList() {
      ﻿uni.showLoading({
        title: '加载中',
        mask: true
      });
      this.$ajax
        .get(this.$api.getBannerList,{mid:3, page_size:5, page: 1})
        .then(res => {
          this.bannerList = res.data;
          this.currentSwiper = 0
          this.loadingEnd.moduleOne = true
        })
        .catch(err => {
          this.loadingEnd.moduleOne = true;
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    },
    // 获取推荐项目
    getHomeProjectList() {
      this.$ajax
        .get(this.$api.getHomeProjectList,{page_size: 3, page: 1})
        .then(res => {
          this.movieList = res.data
          this.loadingEnd.moduleTwo = true
        })
        .catch(err => {
          this.loadingEnd.moduleTwo = true;
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    },
    // 获取分类项目
    getClassList() {
      this.$ajax
        .get(this.$api.getProjectClassList)
        .then(res => {
          this.classList = res
          this.loadingEnd.moduleThree = true
        })
        .catch(err => {
          this.loadingEnd.moduleThree = true;
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    },
    viewLoad(){
      this.loadingEnd = {
        moduleOne: false,
        moduleTwo: false,
        moduleThree: false
      };
      ﻿uni.showLoading({
        title: '加载中',
        mask: true
      });
      this.getBannerList();
      this.getHomeProjectList();
      this.getClassList()
    },
  },
    computed:{
      hideLoading(){
        if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo && this.loadingEnd.moduleThree){
          setTimeout(function(){
            ﻿uni.hideLoading()
            }, 800)
        }
      }
    },
    onPullDownRefresh(){
      this.viewLoad()
      ﻿uni.stopPullDownRefresh() //停止下拉刷新
    },
	onShareAppMessage(res){
	  ﻿this.$common.share()
	},
    onLoad() {
      ﻿uni.showShareMenu({
        withShareTicket: true
      })
      this.viewLoad()
    }
}
</script>

<style scoped>
  .main{
    padding: 0 30rpx 30rpx;
    box-sizing: border-box;
  }
  .swiper{
    width: 100%;
    font-size: 0;
    margin-bottom: 16rpx;
    height: 369rpx;
    border-radius: 20rpx !important;
    overflow: hidden !important;
    transform: translateY(0);
  }
  .slide-image {
    display: block;
    height: 100%;
    width: 100%;
  }
  .iconyinhao{
    font-size: 33rpx;
    color: #cecece;
    margin-right: 24rpx;
  }
  .recommend{
    width: 100%;
    background-color: #FAFAFA;
    border: 1rpx solid #EEEEEE;
    border-radius: 20rpx;
    padding: 38rpx 8rpx 10rpx 8rpx;
    box-sizing: border-box;
  }
  .recommend>div:first-child{
    display: flex;
    margin-bottom: 28rpx;
  }
  .recommend>div:first-child>img{
    width: 31rpx;
    height: 28rpx;
    margin-right: 25rpx;
  }
  .recommend>div:first-child>p{
    font-size: 30rpx;
    line-height: 44rpx;
    color: #535353;
  }
  .project-movie{
    border: 1rpx solid #EEEEEE;
    border-radius: 20rpx;
  }
  .project-movie>div:first-child{
    display: flex;
    border-bottom: 1rpx solid #EEEEEE;
    padding: 21rpx 0 20rpx 18rpx;
  }
  .project-movie>div:last-child{
    padding: 28rpx 20rpx 0;
  }
  .project-movie>div:first-child>p:first-child{
    font-size: 26rpx;
    color: #323232;
    font-weight: bold;
  }
  .project-movie>div:first-child>p:last-child{
    font-size: 24rpx;
    color: #646464;
    font-weight: 500;
    margin-top: 2rpx;
    margin-left: 9rpx;
  }
</style>
